<template>
<div>
  <div class="card" style="margin-bottom: 10px">
    <el-input v-model="data.name" style="width:20%;border: none;border-radius: 5px ;margin-right: 10px"
              class="w-50 m-2" placeholder="课程名" :prefix-icon="Search"/>
    <el-button type="primary" round style="margin-left: 10px" @click="load">查询</el-button>
    <el-button type="info" round @click="reset" style="margin-left: 10px">清除</el-button>

  </div>
  <div class="card" style="margin-bottom: 10px;" v-if="user.role==='STUDENT'">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="courseId" label="课程序号" />
      <el-table-column prop="courseNum" label="课程编号" />
      <el-table-column >
        <template #default="scope" >
          <el-button type="danger" style="margin-left: 0px" @click="delHandler(scope.row.id)" >退课</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--管理员的列表-->
  <div class="card" style="margin-bottom: 10px;" v-if="user.role==='ADMIN'">
    <el-table :data="addNote.tableData" style="width: 100%">
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="courseId" label="课程序号" />
      <el-table-column prop="courseNum" label="课程编号" />
      <el-table-column prop="studentName" label="选课学生" />
      <el-table-column >
        <template #default="scope" >
          <el-button type="danger" style="margin-left: 0px" @click="delHandler(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class= "card" >
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                   @current-change = "handleCurrentChange"
                   layout="prev, pager, next" :total="data.total"/>
  </div>
</div>


</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

const delHandler=(id) =>{
  ElMessageBox.confirm(
      '此操作会永久删除数据，是否确认?',
      '注意！',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(()=>{
    request.delete('/courseSel/delete/' + id).then(res=>{
    if(res.code==='200'){
      studentLoad()
      ElMessage.success('退课成功')
    } else{
      ElMessage.error(res.msg)
    }
  })
  })
}

const user = JSON.parse(localStorage.getItem("student-user"));
const data = reactive({
  courseName:'',
  courseNum:'',
  name:'',
  number: '',
  teacher: '',
  tableData:[],
  total: 0,
  pageNum: 1, //当前的页码
  pageSize: 10, // 每页个数
  formVisible: false,
  form: {}
})
const  studentLoad =() =>{
    request.get("/courseSel/getAll", {
      params:{
        pageNum: data.pageNum,
        pageSize:data.pageSize,
        courseName: data.name,
        courseNum: data.number,
        studentId: user.id,
        studentName: user.name,
      }} ).then(res => {
      data.tableData = res.data?.list || []
      data.total = res.data?.total || 0
    })
}
const addNote=reactive({
  tableData:[],
  total: 0,
})
const  adminLoad =() =>{
    request.get("/courseSel/getAll", {
      params:{
        pageNum: data.pageNum,
        pageSize:data.pageSize,
        form:{}
      }} ).then(res => {
      addNote.tableData = res.data?.list || []
      addNote.total = res.data?.total || 0
    })

}
studentLoad()
adminLoad()
</script>